<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2023-06-05 09:59:56
 * @LastEditors: qingyang
 * @LastEditTime: 2023-06-08 13:57:19
-->
<template>
  <div class="container-box" :style="boxStyle">
    <slot name="bg"></slot>
    <slot name="header">
      <div class="container-header g-flex-between-start" :style="props.headerStyle">
        <div class="container-header-title g-flex-start-center">
          <span class="container-header-title-text">{{ props.title }}</span>
          <span class="container-header-title-tips g-ell" v-if="props.titleTips">{{
            props.titleTips
          }}</span>
        </div>
        <div
          class="container-header-operation g-flex-start-center"
          v-if="props.titleLinkUrl || $slots.headerOperation"
        >
          <slot name="headerOperation"></slot>
        </div>
      </div>
    </slot>
    <div class="container-body">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup name="ContainerBox">
import { defineProps, withDefaults, computed } from 'vue';
import type { CSSProperties } from 'vue';

interface ContainerBoxProps {
  height?: string;
  style?: CSSProperties;
  title?: string;
  titleTips?: string;
  titleLinkText?: string;
  titleLinkUrl?: string;
  headerStyle?: CSSProperties;
}
const props = withDefaults(defineProps<ContainerBoxProps>(), {
  // NOTE 理论上应该是auto的
  height: 'auto',
  titleLinkText: '查看'
});

const boxStyle = computed(() => {
  const style = props.style || {};
  return {
    height: props.height,
    ...style
  };
});
</script>
<style lang="scss" scoped>
.container-box {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  .container-header {
    padding: 21px 24px 0;
    width: 100%;
    height: 70px;
    .container-header-title {
      height: 32px;
      .container-header-title-text {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #0a1f33;
        line-height: 26px;
      }
      .container-header-title-tips {
        margin-left: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7a8a99;
        line-height: 22px;
        max-width: 630px;
      }
    }
    .container-header-operation {
      height: 32px;
      :deep(.operation-btn.el-button) {
        color: #1d92cc;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .container-body {
    padding: 0 24px 24px;
  }
}
</style>
